<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'tabPanel.jsp' starting page</title>

		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
		<script type="text/javascript">
Ext
		.setup( {
			icon : 'icon.png',
			glossOnIcon : false,
			tabletStartupScreen : 'tablet_startup.png',
			phoneStartupScreen : 'phone_startup.png',
			onReady : function() {

				var overlayTb = new Ext.Toolbar( {
					dock : 'top'
				});

				var overlay = new Ext.Panel( {
					floating : true,
					modal : true,//背景变深色
					centered : false,//居中
					width : 200,
					height : 200,
					styleHtmlContent : true,
					scroll : 'vertical',
					dockedItems : overlayTb,
					html : '这里可以是一个List也可以是其他的东西。一般来说可以作为更多按钮来使用= =不错吧。尽情享用吧。',
					cls : 'htmlcontent'
				});

				var showOverlay = function(btn, event) {
					overlay.setCentered(false);
					overlayTb.setTitle('更多');
					overlay.showBy(btn);
				};

				var tabPanel = new Ext.TabPanel(
						{
							fullscreen : true,
							type : 'dark',
							tabBar : {
								items : {
									isMoreButton : true,
									text : '更多',
									handler : showOverlay
								},
								onTabTap : function(tab) {
									if (!tab.isMoreButton) {//下面这段代码是tabBar源码里原来的onTabTap方法，因为威老找不到方法去引用它，只能用Copy了。无奈。。。
										if (!tab.disabled) {
											if (this.cardLayout) {
												if (this.cardSwitchAnimation) {
													var animConfig = {
														reverse : (this.items
																.indexOf(tab) < this.items
																.indexOf(this.activeTab)) ? true
																: false
													};

													if (Ext
															.isObject(this.cardSwitchAnimation)) {
														Ext
																.apply(
																		animConfig,
																		this.cardSwitchAnimation);
													} else {
														Ext
																.apply(
																		animConfig,
																		{
																			type : this.cardSwitchAnimation
																		});
													}
												}

												this.cardLayout
														.setActiveItem(
																tab.card,
																animConfig
																		|| this.cardSwitchAnimation);
											}
											this.activeTab = tab;
											this.fireEvent('change', this, tab,
													tab.card);
										}
									}
								}
							},
							sortable : true,
							items : [ {
								title : 'Tab 1',
								html : '1',
								cls : 'card1'
							}, {
								title : 'Tab 2',
								html : '2',
								cls : 'card2'
							}, {
								title : 'Tab 3',
								html : '3',
								cls : 'card3'
							} ]
						});
			}
		});
</script>
	</head>

	<body>
		This is my JSP page.
		<br>
	</body>
</html>
